<template>
  <div class="user-wrapper">
    <div class="content-box">
        <span class="action" @click="$router.push('/screen/screen')">监控大屏</span>
     <!-- <a href="http://www.shopem.cn" target="_blank">
        <span class="action">
          <a-icon type="question-circle-o"></a-icon>
        </span>
      </a> -->
      <notice-icon class="action" />
      <a-dropdown>
        <span class="action ant-dropdown-link user-dropdown-menu">
          <!--<a-avatar class="avatar" size="small" :src="avatar()"/>-->
          <a-icon class="avatar" size="small" type="user" />
          <span>{{username}}</span>
        </span>
        <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
          <a-menu-item key="0">
            <router-link :to="{ name: 'UserMessageForm' }">
              <a-icon type="user" />
              <span>个人中心</span>
            </router-link>
          </a-menu-item>
          <!-- <a-menu-item key="1">
            <router-link :to="{ name: 'userFeedback' }">
              <a-icon type="form" />
              <span>用户反馈</span>
            </router-link>
          </a-menu-item> -->
          <a-menu-divider />
          <a-menu-item key="1">
            <a href="javascript:;" @click="handleLogout">
              <a-icon type="logout" />
              <span>退出登录</span>
            </a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
  </div>
</template>
<script>
  import NoticeIcon from '@/components/NoticeIcon';
  import { mapActions, mapGetters } from 'vuex';
  import Vue from 'vue';
  import { USER } from '@/store/mutation-types';
  import { logout } from '@/api/passport';
  import { showSuccess, showError } from '@/utils/showMsg';

  export default {
    name: 'UserMenu',
    data() {
      return {
        username: '',
        isClick: true,
      }
    },
    components: {
      NoticeIcon,
    },
    mounted() {
      const user = Vue.ls.get(USER);
      this.username = user.username
    },
    methods: {
      ...mapActions(['Logout']),
      ...mapGetters(['nickname', 'avatar']),
      handleLogout() {
        if(!this.isClick){
            return false
        }
       this.isClick = false;
       const _this = this
       this.$confirm({
         title: '提示',
         content: '确定要注销登录吗 ?',
         onOk() {
           logout().then((res) => {
             if(res.data.errorCode === 0) {
                Vue.ls.clear()
                window.location.reload();
             }
           })
           _this.isClick = true;
         },
         onCancel() {
           _this.isClick = true;
         },
       });
      },
    },
  };
</script>
